<template>
    <div>
        <HeaderCategory :disabled="!isShow"></HeaderCategory>
        <el-card class="box-card" style="margin: 0 30px;">
            <div v-show="isShow">
                <el-button type="primary" icon="el-icon-plus" @click="isShow = false" :disabled="!category3Id">添加属性</el-button>

                <el-table :data="attrList" border style="width: 100%">
                    <el-table-column label="序号" type="index" width="80" align="center">
                    </el-table-column>
                    <el-table-column prop="attrName" label="属性值名称" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="属性值列表">
                        <template v-slot="{ row, column, $index }">
                            <el-tag v-for="item in row.attrValueList" :key="item.id">{{ item.valueName }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="160">
                        <template v-slot="{ row, column, $index }">
                            <el-button type="primary" icon="el-icon-edit-outline" size="mini"
                                @click="addOrEdit(row)"></el-button>
                            <el-button type="danger" icon="el-icon-delete-solid" size="mini"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-show="!isShow">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="属性名">
                        <el-input v-model="attrContent.attrName" placeholder="请输入属性名" size="medium"
                            style="width:250px"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" size="small" @click="addAttr">添加属性值</el-button>
                <el-button size="small" @click="isShow = true">取消</el-button>

                <el-table :data="attrContent.attrValueList" stripe style="margin:20px 0;">
                    <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
                    <el-table-column label="属性值名称">
                        <template v-slot="{ row, column, $index }">
                            <!-- 不只有鼠标移出，我们还有回车事件 -->
                            <el-input @keyup.enter="saveValue($index, row)" v-model="row.valueName" v-show="row.isEdit"
                                size="mini" @blur="saveValue($index, row)" ref="valueInput"></el-input>
                            <span v-show="!row.isEdit" @click="editValue($event, row)">{{ row.valueName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template v-slot="{ row, column, $index }">
                            <el-button type="warning" size="mini" icon="el-icon-edit-outline"
                                @click="editValue($event, row)"></el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete-solid"
                                @click="deleteValue($index)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="primary" size="mini" @click="saveAttrInfo">保存</el-button>
                <el-button size="small" @click="isShow = true">取消</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import { nextTick } from 'vue';
import { mapState } from 'vuex';
import attrApi from '@/api/attr'
import { cloneDeep } from 'lodash'
export default {
    name: 'Attr',
    data() {
        return {
            isShow: true,
            attrValuesList: [],// 添加的属性的属性值列表
            attrContent: { // 添加属性，添加属性没有id  只有修改有id
                attrName: '',
                attrValueList: [],
                categoryId: this.category3Id,
                categoryLevel: 3,
            }
        }
    },
    methods: {
        // 获取属性列表
        async getAttrList() {
            try {
                let category2Id = this.category2Id
                let category1Id = this.category1Id
                await this.$store.dispatch('getAttrList', { category2Id, category1Id, category3Id: this.category3Id })
            } catch (error) {

            }
        },
        // 添加属性值  点击添加一个属性值到attrValuesList中
        addAttr() {
            this.attrValuesList.push({
                // 我们没有id因为这是添加数据，只有修改才会有id
                valueName: '',
                isEdit: true,
                attrId: this.attrContent.id || undefined
            })
            // 添加属性值的时候我们的需要进行获取焦点       但是由于页面刷新是异步的，我们的如果直接foucs会失效，使用nextick方法，他能在页面加载完毕之后触发
            nextTick(() => {
                this.$refs.valueInput.focus()
            })
        },
        // 输入框离开焦点之后变成查看模式
        saveValue(index, row) {
            // console.log(11);
            // row.isShow = !row.isShow
            // 离开焦点之前我们还需要判断他是否输入了值，如果没有就需要将这个row删除掉，以及是否有重复的内容
            if (!row.valueName.trim()) {
                this.$message.error('属性值不能为空')
                this.attrValuesList = this.attrValuesList.filter((item, i) => i !== index)
                return
            }
            // 先排除自己  然后进行判断是否有相同的数据
            let flag = this.attrValuesList.some(item => {
                if (item != row) return item.valueName === row.valueName
            })
            if (flag) {
                this.$message.error('属性值不能重复')
                // 将对应index的数据删除掉
                this.attrValuesList.splice(index, 1)
                return
            }
            row.isEdit = false
        },
        // 属性值点击修改
        editValue(e, row) {
            // 把所有的属性都变成查看模式
            this.attrValuesList.forEach(item => this.$set(row,'isEdit',false))
            // 只把当前的row的isShow打开
            this.$set(row,'isEdit',true)
            nextTick(() => {
                this.$refs.valueInput.focus()
            })
        },
        // 删除属性值
        deleteValue(index) {
            this.attrValuesList.splice(index, 1)
        },
        // 点击了保存
        async saveAttrInfo() {
            // 整理数据
            let attr = this.attrContent
            attr.attrValueList = attr.attrValueList.map(item => {
                // 判断是否为空，有可能用户会还没有失去焦点的时候直接点击了保存
                // if (item.valueName.trim()) {
                // return {
                //     valueName: item.valueName,
                //     attrId: item.attrId
                // }
                delete item.isEdit
                return { ...item }
            })
            console.log(attr);
            // 此时去调用保存的请求  并且返回form表单 并且提示 而且我们的页面请求也要重新发送
            try {
                await attrApi.saveAttrInfo(attr)
                // 返回属性列表
                await this.getAttrList()
                this.isShow = true
                this.$message.success('添加成功')

            } catch (error) {
                // 添加失败留在当前页
                console.log(error);
                this.$message.error('添加失败')
            }
        },
        // 点击某个修改
        addOrEdit(row) {
            this.isShow = false
            this.attrContent = cloneDeep(row)
            row.attrValueList.forEach(item => item.isEdit = false)
        }
    },
    computed: {
        ...mapState({
            attrList: state => state.attr.attrList,
            category3Id: state => state.headercategory.category3Id,
            category2Id: state => state.headercategory.category2Id,
            category1Id: state => state.headercategory.category1Id,
        })
    },
    watch: {
        category3Id: {
            handler(val) {
                // 因为我们需要保存数据 但是vuex的数据不是响应式的，而且我们的是v-show，并不会获取最新的数据，所以我们的需要在监视的时候进行赋值给我们手机的数据中
                this.attrContent.categoryId = val;
                // console.log(111);
                let category2Id = this.category2Id
                let category1Id = this.category1Id
                // console.log(category2Id,category1Id);
                this.$store.dispatch('getAttrList', { category2Id, category1Id, category3Id: val })
            },
            // immediate: true,
        }
    }
}
</script>

<style lang="less" scoped></style>
